<template>
    <div>
        <panle title='播放错误日志' content="播放错误日志列表"></panle>
        <el-form :inline="true" ref="form" :model="form" label-width="80px" class="demo-form-inline">
            <el-form-item label="直播ID" prop="live">
                <el-input size="mini" placeholder="请输入直播ID" v-model="form.live"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="user_phone">
                <el-input size="mini" placeholder="请输入手机号" v-model="form.user_phone"></el-input>
            </el-form-item>
            <el-form-item label="网络类型" prop="state">
                <el-select size="mini" v-model="form.network_type" placeholder="请选择">
                    <el-option v-for="item in type_state" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <!--<el-form-item label="创建时间" prop="create_time">-->
            <!--    <el-date-picker-->
            <!--        v-model="form.create_time"-->
            <!--        type="daterange"-->
            <!--        align="right"-->
            <!--        size="mini"-->
            <!--        unlink-panels-->
            <!--        range-separator="至"-->
            <!--        start-placeholder="开始日期"-->
            <!--        end-placeholder="结束日期"-->
            <!--        format="yyyy-MM-dd"-->
            <!--        value-format="yyyy-MM-dd HH:mm:ss"-->
            <!--        :default-time="['00:00:00', '23:59:59']"-->
            <!--        :picker-options="pickerOptions">-->
            <!--    </el-date-picker>-->
            <!--</el-form-item>-->
            <el-form-item>
                <el-button type="primary" @click="search" size="mini" >搜索</el-button>
                <el-button @click="resetForm('form')" size="mini" >重置</el-button>
                <el-button size="mini" @click="init()">刷新</el-button>
                <vue-json-excel
                    style="display: inline;margin-left: 10px;"
                    :data="tableData"
                    :fields="excelFields"
                    name="导出订单.xlsx"
                    type="xlsx"
                >
                    <el-button size="mini">导出</el-button>
                </vue-json-excel>
            </el-form-item>
        </el-form>
        <div class="table-wrap">
            <el-table :data="tableData" :loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                      stripe default-expand-all>
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="id" label="ID" width="60"></el-table-column>
                <el-table-column prop="live" label="直播ID" width="60"></el-table-column>
                <el-table-column prop="network_type" label="网络类型"></el-table-column>
                <el-table-column prop="user_phone" label="手机号"></el-table-column>
                <el-table-column prop="user_headimgurl" label="微信头像">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.user_headimgurl" fit="fill" style="width: 60px;height: 60px;"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="user_nickname" label="微信昵称"></el-table-column>
                <el-table-column prop="user_union_id" label="unionID"></el-table-column>
                <el-table-column prop="data" label="错误信息"></el-table-column>
                <el-table-column prop="web_user_agent" label="浏览器信息"></el-table-column>
                <el-table-column prop="add_time" label="创建时间"></el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="form.pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="form.pageSize"
                               background layout="total, sizes, prev, pager, next, jumper" :total="form.total"> </el-pagination>
            </div>
        </div>
    </div>



</template>

<script>
import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import VueJsonExcel from 'vue-json-excel';
import { tcPlayerView } from "@/api/live/log";

export default {
    components:{
        Panle,
        PersButton,
        VueJsonExcel
    },
    data() {
        return {
            open:false,
            orderfrom:[{
                value: '1',
                label: '直播'
            },{
                value: '2',
                label: '分享'
            },{
                value: '3',
                label: '其他'
            }],
            type_state:[{
                value: '"unknown"',
                label: '蜂窝网络'
            },{
                value: '"4g"',
                label: '4g'
            },{
                value: '"wifi"',
                label: 'wifi'
            }],
            tableData: [],
            form: {
                live: this.$route.query.liveId || '',
                user_phone: '',
                user_nickname: '',
                user_headimgurl: '',
                user_union_id: '',
                user_open_id: '',
                network_type:'',
                add_time: [],
                pageSize: 10,
                pageNumber: 1,
                total: 0
            },
            pickerOptions: {
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' +  (current.getMonth() + 1) + '-' + current.getDate(); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' +  (current.getMonth() + 1) + '-' + (current.getDate() - 1); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '上一周',
                        onClick(picker) {
                            const current = new Date();
                            const start_day = current.getDate() - current.getDay() - 6;
                            const end_day = current.getDate() - current.getDay();
                            const month = current.getFullYear() + '-' +  (current.getMonth() + 1) + '-'; //年月
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month + start_day).getTime());
                            end.setTime(new Date(month + end_day + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
            },
            excelFields: {
                "直播ID": "live",
                "网络类型": "network_type",
                "手机号": "user_phone",
                "微信昵称": "user_nickname",
                "unionID": "user_union_id",
                "错误信息": "data",
                "浏览器信息": "web_user_agent",
                "创建时间": "add_time"
            }

        }
    },
    created(){
        this.init();
    },
    methods: {
        // hasPermission,
        // isShow,
        init(){
            this.loading = true;
            tcPlayerView(this.form).then((res)=>{
                console.log(res);
                let list = res.data.list;
                list = list.map((item)=>{
                    let user = JSON.parse(item.user);
                    item.user_phone = user.phone;
                    item.user_nickname = user.nickname;
                    item.user_open_id = user.openid;
                    item.user_union_id = user.unionid;
                    item.user_headimgurl = user.headimgurl;
                    return item;
                });
                console.log('init', list);
                this.tableData = list;
                this.form.total = res.data.total;
                this.loading = false;
            })
        },
        search: function() {
            this.loading = true;
            this.form.pageSize = 10;
            this.form.pageNumber = 1;
            this.init();
        },
        handleSizeChange: function(e) {
            console.log(e);
            this.form.pageSize = e;
            this.init();
        },
        handleCurrentChange: function(e) {
            console.log(e);
            this.form.pageNumber = e;
            this.init();
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.init();
        }
    }
}






</script>

<style>
.demo-form-inline {
    margin: 20px;

    .el-form-item {
        margin-bottom: 0;
    }
}
.el-form--inline .el-form-item {
    display: inline-block;
    vertical-align: top;
}
.search-content{
    width: 100%;
    margin: 20px;
}



</style>